<template>
  <view class="page">
    <view class="page-ctx">
      <view class="ctx-box">
        <view class="info-box">
          <view class="info-items">
            <view class="item">
              <view class="label">头像</view>
              <view class="val">
                <view class="avatar-box">
                  <!-- #ifdef WEB -->
                  <button
                    class="hidden-btn-avatar btn-h5"
                    open-type=""
                    @click="doUploadAvatar()"></button>
                  <!-- #endif -->

                  <!-- #ifndef WEB -->
                  <button
                    class="hidden-btn-avatar btn-not-h5"
                    open-type="chooseAvatar"
                    @chooseavatar="onChooseAvatar"></button>
                  <!-- #endif -->

                  <!-- <button class="hidden-btn-avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button> -->
                  <image
                    v-if="!editInfo.image"
                    :src="vuex_avatar_default"
                    class="avatar"></image>
                  <image
                    v-else
                    :src="editInfo.image"
                    mode="aspectFill"
                    class="avatar"></image>
                </view>
              </view>
            </view>
            <!-- <view class="item">
							<view class="label">
								昵称
							</view>
							<view class="val">
								<view class="input-box">
									<input v-model="editInfo.nickname" type="nickname" value="" placeholder="昵称" class="input"
										placeholder-class="input-p" @blur="handleGetNick" />
								</view>
							</view>
						</view> -->
          </view>
        </view>
        <view class="info-box">
          <view class="info-items">
            <view class="item">
              <view class="label">姓名</view>
              <view class="val">
                <view class="input-box">
                  <input
                    v-model="editInfo.nickname"
                    type="text"
                    value=""
                    placeholder="姓名"
                    class="input"
                    placeholder-class="input-p" />
                </view>
              </view>
            </view>

            <!-- 		<view class="item">
							<view class="label">
								身份证号
							</view>
							<view class="val">
								<view class="input-box">
									<input v-model="editInfo.id_card" maxlength="18" type="text" value="" placeholder="身份证号"
										class="input" />
								</view>
							</view>
						</view> -->

            <!-- 	<view class="item" @click="genderOpen()">
							<view class="label">
								性别
							</view>
							<view class="val">
								<text class="text" v-if="userGenderTitle">{{userGenderTitle}}</text>
								<text class="text-p" v-else>请选择</text>
								<image class="arrow" src="@/static/my/info-arrow.png" mode="scaleToFill"></image>
							</view>
						</view> -->

            <!-- <view class="item" @click="birthdayOpen()">
							<view class="label">
								生日
							</view>
							<view class="val">
								<text class="text" v-if="editInfo.birthday">{{editInfo.birthday}}</text>
								<text class="text-p" v-else>请选择</text>
								<image class="arrow" src="@/static/my/info-arrow.png" mode="scaleToFill"></image>
							</view>
						</view> -->
            <view class="item">
              <view class="label">部门</view>
              <view class="val">
                <view class="input-box">
                  <input
                    v-model="editInfo.department"
                    type="text"
                    placeholder="部门"
                    class="input"
                    placeholder-class="input-p" />
                </view>
              </view>
              <!--  <view class="val">
                <text class="text">{{ editInfo.department || "" }}</text> -->
              <!-- <image class="arrow" src="@/static/my/info-arrow.png" mode="scaleToFill"></image> -->
              <!-- </view> -->
            </view>
            <view class="item">
              <view class="label">手机号</view>
              <view class="val">
                <text class="text">{{ mix_user_phone }}</text>
                <!-- <image class="arrow" src="@/static/my/info-arrow.png" mode="scaleToFill"></image> -->
              </view>
            </view>
          </view>
        </view>
      </view>

      <!--  <view class="logout-box">
        <view class="btn" @click="to_logout()">退出</view>
      </view> -->
    </view>

    <view class="page-foot">
      <view class="safe-fixed-bottom">
        <view class="btns">
          <view class="btn flex-center btn-pay" @click="doSubmit()">
            修改信息
          </view>
        </view>
      </view>
    </view>

    <!--  <gender_pop ref="gender_pop" @confirm="genderConfirm" />
    <birthday_pop ref="birthday_pop" @confirm="birthdayConfirm" /> -->
  </view>
</template>

<script>
// import gender_pop from "@/components/myInfo/gender_pop.vue";
// import birthday_pop from "@/components/myInfo/birthday_pop.vue";
import util from "@/plugin/util.js";

export default {
  components: {
    // gender_pop,
    // birthday_pop,
  },
  data() {
    return {
      user: {},

      editInfo: {
        image: "",
        nickname: "",
        realName: "",
        // id_card: '',
        userGender: "",
        birthday: "",
      },

      genderMap: {
        1: "男",
        2: "女",
      },
      userGenderTitle: "",
    };
  },

  onLoad() {
    //this.user_info = uni.getStorageSync('user_info')
    //console.log(this.user_info)
    // this.get_user_info()
  },
  onShow() {
    this.setView();
  },
  onReady() {
    // 微信小程序需要用此写法
  },
  methods: {
    setView() {
      this.$api({
        url: "/getUserInfo",
        method: "get",
        data: {
          //action: "users_userInfo",
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.editInfo = res.data;
          this.editInfo.image = data.image || "";
          this.editInfo.nickname = data.name || "";
          this.editInfo.realName = data.name || "";
          // this.editInfo.sex = data.sex || "";
          // if (data.birthday) {
          //   this.editInfo.birthday = data.birthday.includes("0000")
          //     ? ""
          //     : data.birthday;
          // }
          // if (data.sex) {
          //   this.userGenderTitle = this.genderMap[data.sex];
          // }
        }
      });
    },

    to_logout() {
      this.$store.commit("remove_vuex_user");

      this.toRoute({
        path: "/login",
        mode: "reLaunch",
        query: {},
      });

      // uni.reLaunch({
      // 	url: '/pages/login/login'
      // });
      // this.toReLaunchLogin();
      // this.toRoute({
      // 	path: 'login',
      // 	mode: 'reLaunch'
      // });
    },

    //昵称
    handleGetNick(e) {
      console.log("昵称获取", e);
      this.editInfo.nickname = e.detail.value;
    },

    // 选择头像上传
    onChooseAvatar(e) {
      console.log("选择头像", e);

      let file = e.detail.avatarUrl;
      // this.$apiUpload({
      // 	url: '/upload',
      // 	method: 'post',
      // 	data: {
      // 		file: file,
      // 	},
      // }).then(res => {
      // 	if (res.code == 200) {
      // 		this.editInfo.image = res.data.path;
      // 	}
      // });
      this.$apiUpload({
        url: "/upload",
        method: "post",
        data: {
          //action: "index_localUpload", //login
          file,
          // if_touxiang: 1
        },
      }).then((res) => {
        this.$logjson("index_localUpload 2", res);
        if (res.code == 200) {
          this.editInfo.image = res.data.path;

          //  this.doSubmitAvatar();
        }
      });
    },

    // 本地上传
    doUploadAvatar() {
      util.handleUploadImage({
        count: 1,
        fileKey: "img",
        data: {
          if_touxiang: 1,
        },
        successCallback: (res) => {
          console.log("successCallback res", res);
          this.editInfo.image = res.data.path;

          // this.doSubmitAvatar();
        },
      });
    },

    doSubmitAvatar() {
      let params = {
        image: this.editInfo.image,
      };
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "users_editInfo",
          ...params,
        },
      }).then((res) => {
        this.$logjson("users_editInfo", res);
        this.$alert(res);
        if (res.code == 200) {
          this.$store.commit("edit_vuex_user", params);
        }
      });
    },

    doSubmit() {
      this.mix_throttle(this.doSubmitFn);
    },

    doSubmitFn() {
      let params = {
        image: this.editInfo.image,
        name: this.editInfo.nickname, //昵称
        department: this.editInfo.department,
        // realName: this.editInfo.realName, //真实姓名
        // sex: this.editInfo.userGender,
        // birthday: this.editInfo.birthday,
        // id_card: this.editInfo.id_card,
      };

      this.$api({
        url: "/updateUser",
        method: "post",
        data: {
          // action: "users_editInfo",
          ...params,
        },
      }).then((res) => {
        this.$logjson("users_editInfo", res);
        this.$alert(res);
        if (res.code == 200) {
          this.$store.commit("edit_vuex_user", {
            ...params,
            // name: params.name
          });
          setTimeout(() => {
            this.toBack();
          }, 2000);
          // this.$store.dispatch("query_user");
        }
      });
    },

    //性别
    genderOpen() {
      this.$nextTick(() => {
        this.$refs.gender_pop.init();
      });
    },
    genderConfirm(info) {
      console.log("性别选择", info);
      this.editInfo.userGender = info.value;
      this.userGenderTitle = info.title;
    },
    //性别

    //生日
    birthdayOpen() {
      console.warn("生日选择");
      this.$nextTick(() => {
        this.$refs.birthday_pop.init();
      });
    },
    birthdayConfirm(value) {
      this.editInfo.birthday = value;
    },
    //生日
  },
};
</script>

<style lang="less">
page {
  background: #f8f8f8;
}
</style>

<style lang="less" scoped>
.safe-fixed-bottom {
  background: transparent;
  box-shadow: none;
  .btns {
    width: 100%;

    .btn {
      width: 100%;
      height: 80rpx;
      border-radius: 64rpx;
      background: #da4334;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;

      &.btn-disabled {
        background: #dddddd;
      }

      &[disabled] {
        background: #dddddd;
      }
    }
  }
}

.logout-box {
  margin-top: 80rpx;
  padding: 40rpx 0;

  .btn {
    text-align: center;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #cb0011;
    border: 1rpx solid #cb0011;
    border-radius: 64rpx;
    background: #ffffff;
  }
}

.page {
}

.page-ctx {
  padding: 24rpx 32rpx;
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

.info-box {
  margin-bottom: 16rpx;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 0 24rpx;
  // overflow: hidden;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
}

.info-items {
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 108rpx;

    & + .item {
      border-top: 2rpx solid #f5f5f5;
    }

    .label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
    }

    .val {
      // flex: 1;
      overflow: hidden;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;

      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }

      .text-p {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #777;
      }

      .arrow {
        margin-left: 20rpx;
        width: 12rpx;
        height: 20rpx;
      }

      input {
        font-size: 28rpx;
      }

      .input {
        text-align: right;
        font-size: 28rpx;
      }

      .input-p {
        font-size: 28rpx;
      }

      .input-name {
        text-align: right;
      }
    }
  }
}

.avatar-box {
  margin: 40rpx 0;
  position: relative;
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  overflow: hidden;

  .hidden-btn-avatar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 110rpx;
    height: 110rpx;
    background: #aaa;
    opacity: 0;
    background: transparent;
  }

  .avatar {
    width: 110rpx !important;
    height: 110rpx !important;
  }
}
</style>
